<script setup lang="ts">
import { HomeFilled, Switch } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const goHome = () => {
  router.push({ path: '/' })
}
</script>
<template>
    <aside>
        <div class="flex btn-group">
          <el-button type="primary" text bg @click="goHome"><el-icon>
              <HomeFilled />
            </el-icon>首页</el-button>
          <el-button type="primary" text bg @click="goHome"><el-icon>
              <Switch />
            </el-icon>退出</el-button>
        </div>
        <div class="text-xs version">版本号<br>V0.0.1</div>
      </aside>
</template>
<style scoped lang="less">
.flex {
  display: flex;

}

aside {
  background-color: #fafafa;
  height: calc(100vh - 50px);
  width: 60px;
  border-right: 1px solid #eee;

  .btn-group {
    flex-direction: column;

    .el-button {
      margin: 10px 0 10px 0;
      width: 50px;
      height: 50px;
      font-size: 12px;

      .el-icon {
        display: block;
        font-size: 18px;
      }
    }

  }
  .version{
    position: absolute;
    bottom: 10px;
    width: 60px;
    text-align: center;
  }
}

:deep(.el-button>span) {
  display: flex;
  flex-direction: column;
  align-items: center;
}</style>